import React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import _ from 'lodash';
import { router } from 'umi';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Button,
  Card,
  Col,
  Row,
  Select,
  Input,
  Modal,
} from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';

import yhbm from '../../../../../public/yhbm.png';
import sqzt1 from '../../../../../public/sqzt1.png';
import sqzt2 from '../../../../../public/sqzt2.png';
import token1 from '../../../../../public/token1.png';
import token2 from '../../../../../public/token2.png';

import '@ant-design/compatible/assets/index.css';

const { Option } = Select;
const { Item } = Form;
const tips = [
  {
    title: '什么是云盒编码',
    img: <img src={yhbm} alt="" style={{ width: '100%' }} />,
  },
  {
    title: '授权主体如何填写',
    img: (
      <>
        <h4>
          登录菜鸟云平台，https://cloud.cainiao.com/permission/index#
          点击服务中心-三方授权管理，搜索【快递100电子面单】，
          然后点击查询，查询成功后点击【授权】，授权成功后点击查看授权
        </h4>
        <img src={sqzt1} alt="" style={{ width: '100%' }} />
        <h4>授权主体位置如下图</h4>
        <img src={sqzt2} alt="" style={{ width: '100%' }} />
      </>
    ),
  },
  {
    title: 'TOKEN如何填写',
    img: (
      <>
        <h4>
          登录菜鸟云平台，https://cloud.cainiao.com/permission/index#
          点击服务中心-三方授权管理，搜索【快递100电子面单】，
          然后点击查询，查询成功后点击【授权】，授权成功后点击查看授权
        </h4>
        <img src={token1} alt="" style={{ width: '100%' }} />
        <h4>TOKEN位置如下图，点击复制按钮，粘贴至TOKEN输入框</h4>
        <img src={token2} alt="" style={{ width: '100%' }} />
      </>
    ),
  },
];

interface TableProps extends FormComponentProps {
  dispatch: Dispatch;
  loading: boolean;
  INITINFO: any;
}

interface TableState {
  tipsVisible: boolean;
  tipsIndex: number;
  submitValues: any;
  submitVisible: boolean;
}

@connect(({ common: { INITINFO }, loading }: any) => ({
  INITINFO,
  loading: loading.effects['cloudBoxAdd/submit'],
}))
class CloudBoxElem extends React.Component<TableProps, TableState> {
  state: TableState = {
    tipsVisible: false,
    tipsIndex: 0,
    submitValues: {},
    submitVisible: false,
  };

  componentDidMount() {
    this.fetchLogisList();
  }

  fetchLogisList = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'common/fetchLogisList' });
  };

  handleChangeSubmitModal = (submitVisible: boolean) => {
    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      if (errors) return;

      const params = {
        pageIndex: 1,
        pageSize: 20,
        ...values,
      };
      this.setState({
        submitVisible,
        submitValues: params,
      });
    });
  };

  handleSubmit = () => {
    const { submitValues } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'cloudBoxAdd/submit',
      payload: submitValues,
    });
  };

  handleChangeModal = (tipsVisible: boolean, tipsIndex: number = 0) => {
    this.setState({ tipsVisible, tipsIndex });
  };

  render() {
    const { tipsVisible, tipsIndex, submitVisible } = this.state;
    const {
      form: { getFieldDecorator },
      loading,
      INITINFO: { logisList },
    } = this.props;

    return (
      <>
        <PageHeader />

        <Card bordered={false}>
          <Form
            className="tableListForm"
            hideRequiredMark
            onSubmit={this.handleSubmit}
          >
            <Row gutter={12}>
              <Col md={8} sm={24}>
                <Item label="　　物流中心">
                  {getFieldDecorator('logisId', {
                    rules: [{ required: true, message: '请选择物流中心' }],
                  })(
                    <Select
                      showSearch
                      placeholder="请选择"
                      filterOption={(input: any, option: any) => (
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      )}
                    >
                      {logisList.map((item: any) => (
                        <Option value={item.id} key={item.id}>
                          {item.name}
                        </Option>
                      ))}
                    </Select>,
                  )}
                </Item>
              </Col>
            </Row>
            <Row gutter={12}>
              <Col md={8} sm={24}>
                <Item label="　　云盒编码">
                  {getFieldDecorator('boxCode', {
                    rules: [{ required: true, message: '请输入云盒编码' }],
                  })(<Input allowClear placeholder="请输入" />)}
                </Item>
              </Col>
              <Col md={8} sm={24} style={{ lineHeight: '32px' }}>
                <span
                  className="nameLink"
                  onClick={() => this.handleChangeModal(true, 0)}
                  style={{ color: 'green' }}
                >
                  <QuestionCircleOutlined style={{ marginRight: 8 }} />
                  什么是云盒编码
                </span>
              </Col>
            </Row>
            <Row gutter={12}>
              <Col md={8} sm={24}>
                <Item label="　　授权主体">
                  {getFieldDecorator('partnerId', {
                    rules: [{ required: true, message: '请输入授权主体' }],
                  })(<Input allowClear placeholder="请输入" />)}
                </Item>
              </Col>
              <Col md={8} sm={24} style={{ lineHeight: '32px' }}>
                <span
                  className="nameLink"
                  onClick={() => this.handleChangeModal(true, 1)}
                  style={{ color: 'green' }}
                >
                  <QuestionCircleOutlined style={{ marginRight: 8 }} />
                  授权主体如何填写
                </span>
              </Col>
            </Row>
            <Row gutter={12}>
              <Col md={8} sm={24}>
                <Item label="　　　TOKEN">
                  {getFieldDecorator('partnerKey', {
                    rules: [{ required: true, message: '请输入TOKEN' }],
                  })(<Input allowClear placeholder="请输入" />)}
                </Item>
              </Col>
              <Col md={8} sm={24} style={{ lineHeight: '32px' }}>
                <span
                  className="nameLink"
                  onClick={() => this.handleChangeModal(true, 2)}
                  style={{ color: 'green' }}
                >
                  <QuestionCircleOutlined style={{ marginRight: 8 }} />
                  TOKEN如何填写
                </span>
              </Col>
            </Row>
            <Row gutter={12}>
              <Col md={8} sm={24}>
                <Item label="下单自动打印">
                  {getFieldDecorator('autoPrint', {
                    initialValue: 1,
                    rules: [{ required: true, message: '请选择是否下单自动打印' }],
                  })(
                    <Select placeholder="请选择">
                      <Option value={1}>启动</Option>
                      <Option value={0}>关闭</Option>
                    </Select>,
                  )}
                </Item>
              </Col>
            </Row>
            <Row gutter={12}>
              <Col md={8} sm={24}>
                <Button
                  type="primary"
                  onClick={() => this.handleChangeSubmitModal(true)}
                  loading={loading}
                >
                  保存
                </Button>
                <Button
                  ghost
                  type="primary"
                  className="marginL16"
                  onClick={() => router.goBack()}
                >
                  取消
                </Button>
              </Col>
            </Row>
          </Form>
        </Card>

        <Modal
          title={tips[tipsIndex].title}
          destroyOnClose
          visible={tipsVisible}
          width={800}
          footer={null}
          onCancel={() => this.handleChangeModal(false)}
        >
          <div style={{ height: '600px', overflow: 'auto' }}>{tips[tipsIndex].img}</div>
        </Modal>

        <Modal
          title="确认提示"
          visible={submitVisible}
          onOk={this.handleSubmit}
          onCancel={() => this.handleChangeSubmitModal(false)}
        >
          <p style={{ textAlign: 'center' }}>确定云盒编码、授权主体、token输入无误吗？</p>
        </Modal>
      </>
    );
  }
}

export default Form.create<TableProps>()(CloudBoxElem);
